import React from 'react'
import {
  StyleSheet,
  View,
  Text,
  TouchableOpacity,
  TouchableHighlight,
  TouchableNativeFeedback
} from 'react-native'

export default class TouchableTest extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity
          style={styles.button}
          onPress={() => console.log('透明按钮被点击了')}
        >
          <Text>背景透明效果</Text>
        </TouchableOpacity>
        <TouchableHighlight
          style={[styles.button, {backgroundColor: 'yellow'}]}
          underlayColor='white'
          onPress={() => console.log('高亮按钮被点击了')}
        >
          <Text>高亮效果</Text>
        </TouchableHighlight>
        <TouchableNativeFeedback
          background={TouchableNativeFeedback.SelectableBackground()}
          onPress={() => console.log('原生效果按钮被点击了')}
        >
          <View style={[styles.button, {backgroundColor: 'greenyellow'}]}>
            <Text>原生效果</Text>
          </View>
        </TouchableNativeFeedback>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row'
  },
  button: {
    width: 100,
    height: 23,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'yellowgreen',
    borderRadius: 10,
    marginTop: 10,
    marginHorizontal: 10
  }
})
